<template>
	<view class="teaIndex">
        <SRV-topbar title="超圳值走势" :isLeft="true"></SRV-topbar>
		<view class="line">
			<view class="lineTitle">超圳通价格</view>
			<view class="lineVal">{{info.price}}元/个</view>
            <view class="lineBtn" style="width: 15vw;" @click="buyer(0)">买入</view>
            <view class="lineBtn" @click="jump('czvLog', 'type=1')">买入记录</view>
		</view>
        <view class="line">
        	<view class="lineTitle">当前持有</view>
        	<span class="lineVal">{{info.cz_val}}个</span>
            <view class="lineBtn" style="width: 15vw;" @click="withdraw(0)">提现</view>
            <view class="lineBtn" @click="jump('czvLog', 'type=2')">提现记录</view>
        </view>
        <view style="height: 90rpx;border-top: 16rpx rgba(204, 204, 204, 0.3) solid;padding-top: 10rpx;" v-if="deedList.length > 0">
            <view :class="animate+' tipTan animateview'+index" v-for="(item,index) in deedList" :key="index" v-if="checkAnimate(index)">
                {{item.remark}}
            </view>
        </view>
		<view class="nav">
			<view class="nav_item" @click="selNavFun(index)" v-for="(item,index) in navList" :key="index">
				<view :class="index == selNav ? 'nav_name hover' : 'nav_name'">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="qiun-charts" style="padding: 0 10rpx 20rpx 0;">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
			 disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
			 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
			<!--#endif-->
		</view>
        
        <uni-popup ref="buyerPopup" type="center">
            <view class="buyerDiv">
            	<view class="buyerDivTitle">购买超圳通</view>
            	<input class="buyerDivInput" type="text" placeholder="请输入购买个数"  v-model="buyerNum"/>
            	<view class="buyerDivBtn">
            		<text @click="close()" style="color: rgba(17 17 18, 0.8)" class="buyerDivText">取消</text>
            		<text @click="buyer(1)" style="color: #e5c407;"  class="buyerDivText">确认</text>
            	</view>
            </view>
        </uni-popup>
        <uni-popup ref="payPopup" type="bottom">
        	<scroll-view class="payDiv" scroll-y>
        		<image @click="close()" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png"
        			mode="aspectFill"></image>
        		<view class="payTitle">选择支付方式</view>
        		<view class="payPir">
        			<text>应付金额</text>
        			<text>￥{{payInfo.pay_money}}</text>
        		</view>
        		<view class="payLine" v-if="payInfo.pay_money > 0" @click="selPayType(5)">
        			<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
        			<view :class="payData.payment_type == 5 ?'sel':'nosel'" v-if="Number(payInfo.user_money) >= Number(payInfo.pay_money)"></view>
        			<text v-else @click="jump('online_recharge')">余额不足</text>
        		</view>
        		<view class="payLine" v-if="payInfo.pay_money > 0" @click="selPayType(1)">
        			<text>在线微信支付</text>
        			<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
        		</view>
        		<view :style="'height:' + bottomHeight + 'rpx;'" class="payBtn" @click="subPay()">确认支付</view>
        	</scroll-view>
        </uni-popup>
        <uni-popup ref="withdrawPopup" type="bottom">
            <scroll-view class="withdrawDiv" scroll-y>
            	<image @click="close()" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png"
            		mode="aspectFill"></image>
            	<view class="withdrawTitle">申请提现</view>
                <view class="withdrawLine">
                	<view>当前持有：</view>
                    <view class="red">{{info.cz_val}}个</view>
                </view>
            	<view class="withdrawLine">
            		<view>提现数量：</view>
                    <view><input class="withdrawInput" type="number"  placeholder="请输入提现数量"  v-model="withdrawData.num" @blur="changeWithdrawNum()" /></view>
                    <view class="withdrawBon" @click="withdrawAll()">全 部</view>
            	</view>
                <view class="withdrawLine">
                	<view>单价：</view>
                    <view class="orange">￥{{withdrawData.price}}元/个</view>
                </view>
                <view class="withdrawLine">
                	<view>提现金额：</view>
                    <view class="red">￥{{withdrawData.money}}</view>
                </view>
                <view class="withdrawLine">
                	<view>手续费（{{withdrawData.ratio}}%）：</view>
                    <view class="orange">-￥{{withdrawData.commission}}元</view>
                </view>
                <view class="withdrawLine">
                	<view>最终到账金额：</view>
                    <view class="red">￥{{withdrawData.real_money}}元</view>
                </view>
                <view class="withdrawLine" style="display: block;">
                	<view>到账账号</view>
                    <textarea class="withdrawText" placeholder-style="color:rgba(66,81,114,0.5);" value="" placeholder="示例:张三 中国银行北京王府井支行 0000 0000 0000 0000 000" v-model="withdrawData.account" />
                </view>
            	<view :style="'height:' + bottomHeight + 'rpx;'" class="withdrawBtn" @click="subWithdraw()">确认提现</view>
            </scroll-view>
        </uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import commonPay from '../../static/commonPay.js';
	import uCharts from '../../components/u-charts/u-charts.js';
	var canvaLineA = null;
	export default { 
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				outputArr : [],
				dateArr :[],
				selNav : 0,
				navList: [
					{name: '近一个月', val : 1},
					{name: '近三个月', val : 2},
					{name: '近一年', val : 3}
				],
				dateType: 1,
				info: {
					status : 0,
					price : '-',
					nowTea : 0,
					day: '',
					tradeNum: 0,
				},
				tradeList: [],
				tradeSellList: [],
				title: '',
				placeholderText: '',
				tradeNum: 0,
				orderType: 1,
				orderId : 0,
                bottomHeight: 110,
                animateKey: -1,
                animate: [],
                deedList: [],
                intervalDeed: null,
                intervalAnimate: null,
                buyerNum: 10,
                payData: {
                	appkey: uni.getStorageSync('appkey'),
                	'access-token': uni.getStorageSync('access-token'),
                	pay_type: '',
                    drawType: '',
                	pay_id: 0,
                	is_use_hdq: 0,
                    is_use_judge: 0,
                	payment_type: 1,
                    jumpFile: '',
                },
                payInfo: {
                    pay_money : 0,
                    user_money: 0,
                },
                withdrawData: {
                    cz_val: 0,
                    price: 0,
                    num: 0,
                    commission: 0,
                    money: 0,
                    real_money: 0,
                    account: '',
                },
			}
		},
        beforeDestroy() {
            console.info(12);
            if (this.intervalDeed) {
              clearInterval(this.intervalDeed);
            }
            if (this.intervalAnimate) {
              clearInterval(this.intervalAnimate);
            }
        },
		// components: {uCharts},
		methods: {
			numFilter(value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
			selNavFun(k) {
				let item = this.navList[k];
				this.selNav = k;
				this.dateType = item.val;
				this.initData();
			},
			getInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				serve.request({
					url: '/other/czv/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					},
                    v : 'v3'
				}).then(res => {
					this.info = res.data;
                    this.payInfo.user_money = res.data.user_money;
                    this.withdrawData.price = res.data.price;
                    this.withdrawData.ratio = res.data.ratio;
                    this.withdrawData.account = res.data.account;
                    //每隔10分钟调用一次接口
                    this.getDeed();
                    uni.hideLoading();
                    // this.intervalDeed = setInterval(this.getDeed(), 600000);
				});
			},
			getList() {
				serve.request({
					url: '/other/czv/list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					},
                    v : '/v3'
				}).then(res => {
					this.tradeList = res.data.list;
					this.tradeSellList = res.data.sellList;
				});
			},
            getDeed() {
                serve.request({
                	url: '/other/czv/deed',
                	data: {
                		appkey: uni.getStorageSync('appkey'),
                		'access-token': uni.getStorageSync('access-token')
                	},
                    v : '/v3'
                }).then(res => {
                	this.deedList = res.data;
                    this.deedList.forEach((item, key) => {
                    	this.animate[key] = "{'move-animation': false}";
                    });
                    this.animateStart();
                    this.intervalAnimate = setInterval(() => {
                      // 定时器执行的操作
                      console.log('定时器正在运行...');
                      this.animateStart()
                    }, 3000);
                });
            },
            checkAnimate(key) {
                return this.animateKey >= key;
            },
            buyer(type) {
                if(type == 0) {
                    this.$refs.buyerPopup.open();
                    return ;
                }
                if(this.buyerNum < 10) {
                    uni.showToast({
                    	title: "对不起，超圳通10个起买",
                    	icon: 'none',
                    });
                    return ;
                }
                this.payInfo.pay_money = this.numFilter(Number(this.buyerNum) * Number(this.info.price));
                this.$refs.payPopup.open();
            },
            withdraw(type) {
                if(type == 0) {
                    this.$refs.withdrawPopup.open();
                    return ;
                }
                uni.showLoading({
                	title: '提交中···',
                	mask: true
                });
                serve.request({
                	url: '/other/czv/withdraw',
                	data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        'withdrawNum': this.withdrawNum
                    },
                    v: '/v3',
                }).then(res => {
                	if (res.code == 200) {
                		uni.hideLoading();
                        this.payData.pay_type = res.data.pay_type;
                        this.payData.pay_id = res.data.pay_id;
                        commonPay.payFun(this.payData, this, 2);
                	}
                });
            },
            withdrawAll() {
                this.withdrawData.num = this.info.cz_val;
                this.changeWithdrawNum();
            },
            changeWithdrawNum() {
                if(this.withdrawData.num > this.info.cz_val) {
                    this.withdrawData.num = this.info.cz_val;
                }
                this.withdrawData.money = this.numFilter(Number(this.withdrawData.num) * Number(this.withdrawData.price));
                this.withdrawData.commission = this.numFilter(Number(this.withdrawData.money) * Number(this.withdrawData.ratio) / 100);
                this.withdrawData.real_money = this.numFilter(Number(this.withdrawData.money) - Number(this.withdrawData.commission));
            },
            close() {
                this.$refs.buyerPopup.close();
                this.$refs.payPopup.close();
                this.$refs.withdrawPopup.close();
            },
            animateStart() {
                this.$nextTick(function() {
                    this.animateKey++;
                    this.animate[this.animateKey] = '' //清空样式
                    setTimeout(() => {
                        this.animate[this.animateKey] = "{'move-animation': true}";
                    }, 0)
                    if(this.animateKey == 14) {
                        this.animateKey = -1;
                    }
                })
            },
            subPay() {
            	if (this.payData.pay_id != 0) {
            		commonPay.payFun(this.payData, this, 2);
            		return;
            	}
            	uni.showLoading({
            		title: '提交中···',
            		mask: true
            	});
            	serve.request({
            		url: '/other/czv/buyer',
            		data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        'buyerNum': this.buyerNum
                    },
                    v: '/v3',
            	}).then(res => {
                    uni.hideLoading();
            		if (res.code == 200) {
                        this.payData.pay_type = res.data.pay_type;
                        this.payData.pay_id = res.data.pay_id;
                        commonPay.payFun(this.payData, this, 2);
            		}
            	});
            },
            subWithdraw() {
                if(Number(this.withdrawData.num) <= 0 || this.withdrawData.num == "") {
                    uni.showToast({
                    	title: "请填写提现数量",
                        icon:  "error",
                    	duration: 3000,
                    });
                    return ;
                }
                if(this.withdrawData.account == "") {
                    uni.showToast({
                    	title: "请填写到账账号信息",
                        icon:  "error",
                    	duration: 3000,
                    });
                    return ;
                }
                uni.showLoading({
                	title: '提交中···',
                	mask: true
                });
                serve.request({
                	url: '/other/czv/withdraw',
                	data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        'withdrawNum': this.withdrawData.num,
                        'account': this.withdrawData.account,
                    },
                    v: '/v3',
                }).then(res => {
                    uni.hideLoading();
                    var _self = this;
                	uni.showToast({
                		title: res.message,
                        icon: res.code == 200 ? "success" : "error",
                		duration: 3000,
                	    success: function() {
                	        if(res.code == 200) {
                                _self.jump('czvLog', 'type=2');
                            }
                	    },
                	});
                });
            },
            selPayType(payType) {
            	if (payType == 5 && Number(this.payInfo.user_money) < Number(this.payInfo.pay_money)) {
            		return;
            	}
            	this.payData.payment_type = payType;
            },
            callbackFun() {
                uni.showToast({
                	title: '操作成功',
                	duration: 3000,
                    success: function() {
                        this.$refs.buyerPopup.close();
                        this.$refs.payPopup.close();
                        this.$refs.withdrawPopup.close();
                        if (this.intervalAnimate) {
                            clearInterval(this.intervalAnimate);
                        }
                        this.getInfo();
                    },
                });
            },
			initData:function () {
				var self = this;
				serve.request({
					url: '/other/czv/day-list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					},
                    v : 'v3'
				}).then(res => {
					let categories = [];
					let dataList = [];
					let dataAll = res.data;
					console.info(dataAll);
					let maxPrice = 0;
					dataAll.forEach((item, key) => {
						categories.push(item.day);
						dataList.push(item.price);
						if(Number(item.price) > Number(maxPrice)) {
							maxPrice = item.price;
						}
					});
					let LineA = {
						categories: categories,
						series: [{
							"name": "价格",
							"data": dataList
						}]
					};
					console.info(LineA);
					self.showLineA("canvasLineA", LineA, maxPrice);
				});
			},
			showLineA:function(canvasId, chartData, maxPrice) {
				var _self = this;
				console.info(chartData);
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'right',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						disableGrid: true,
						gridType: 'dash',
						splitNumber: Math.ceil(maxPrice / 5),
						min: 0,
						max: Math.ceil(maxPrice),
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
					context: uni.createCanvasContext(canvasId, _self),
				});
			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
			},
			jump(jump_type, jump_link){
				if (this.accessToken == '') {
					common.jump('login');
					return ;
				}
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
            if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
            	this.bottomHeight = 150;
            }
			this.initData();
		},
		onShow() {
			this.getInfo();
		},
		onPullDownRefresh() {
			this.initData();
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
.teaIndex {
	padding-bottom: 100rpx;	
	.nav {
		display: flex;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		z-index: 200;
		align-items: center;
		border-top: 16rpx rgba(204, 204, 204, 0.3) solid;
		border-bottom: 16rpx rgba(204, 204, 204, 0.3) solid;
	
		.nav_item {
			width: 50%;
			text-align: center;
	
			.hover {
				border-bottom: 8rpx rgba(251, 202, 63, 1) solid;
				color: rgba(35, 52, 91, 1) !important;
				font-weight: bold;
			}
	
			.nav_name {
				padding: 0rpx 10rpx;
				display: inline-flex;
				height: 50rpx;
				font-size: 32rpx;
				color: rgba(60, 72, 104, 0.5);
			}
		}
	}
	.line {
	    background: #FFFFFF;
	    padding: 10rpx 2%;
	    display: flex;    
        justify-content: space-between;
        margin-top: 10rpx;
        border-bottom: 1rpx solid #eee;
    }
	.lineTitle {
	    border-left: 10rpx solid rgba(251, 202, 63, 1);
	    padding-left: 10rpx;
	    font-size: 32rpx;
	    color: #000000;
        width: 24vw;
	}
    .lineVal {
        color: red;
        font-size: 34rpx;    
        width: 25vw;
        text-align: right;
        padding-right: 10rpx;
    }
    .lineBtn {
        width: 20vw;
        margin-left: 5vw;
        border: 1rpx solid #ffd900;
        padding: 2rpx 10rpx;
        letter-spacing: 5rpx;
        background: #ffd900;
        color: #fff;
        color: #000;
        text-align: center;
        border-radius: 20rpx;
    }
	/* 通用样式 */
	.qiun-charts {
	    width: 750rpx;
	    height: 500rpx;
	    background-color: #FFFFFF;
		padding-top: 30rpx;
	}	
	.charts {
	    width: 750rpx;
	    height: 500rpx;
	    background-color: #FFFFFF;
	}
	.columnList {
		// margin: 0rpx 30rpx;
		padding: 20rpx 0rpx;
		display: flex;
		font-size: 34rpx;
		color: #666666;
		justify-content: space-between;
		border-top: 16rpx rgba(57, 72, 107, 0.1) solid;
		border-bottom: 16rpx rgba(57, 72, 107, 0.1) solid;
		align-items: center;

		.content_text {
			display: flex;
			align-items: center;
			width: 50%;
			text-align: center;
			view{
				width: 100%;
				span{
					// font-size: 40rpx;
					color: #FF5F60;
				}
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
					margin-top: 4rpx;
				}
				.showNum {
					// position: absolute;
					// right: 0rpx;
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 22rpx;
					background: rgba(235, 89, 56, 1);
					border-radius: 50%;
					margin-left: 20rpx;
				}
			}
			.myTrade{
				display: flex;
				margin-left: 20%;
			}
		}
	}
	.content{
		padding: 20rpx 20rpx;
		display: flex;
		font-size: 20rpx;
		color: #666666;
		justify-content: space-between;
		align-items: center;
		.list {
			display: flex;
			align-items: center;
			width: 100%;
			text-align: center;
			height: 80rpx;
			border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
			font-size: 32rpx;
			view{
				width: 33.3%;
			}
			.btn{
				margin: 0 20%;
				background: #FFBC00;
				bottom: 0rpx;
				color: #fff;
				border-radius: 3%;
				width: 50%;
			}
		}
		.list:first-child{
			// border-top: 1rpx rgba(57, 72, 107, 0.1) solid;
		}
	}
	.show{
		width: 400rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.title{
			text-align: center;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
		}
		input{
			padding: 20rpx 30rpx;
		}
		.btn{
			font-size: 28rpx;
			padding: 0rpx 90rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}
    .tipTan{
        position: fixed;
        width: 85vw;
        // top: 4rpx;
        background: #ffd900;
        padding: 10px;
        border-radius: 20rpx;
    }
    @keyframes moveLeft {
      from { transform: translateX(200%); }
      to { transform: translateX(-100%); }
    }
    .move-animation {
      animation: moveLeft 5s linear;
      animation-fill-mode: forwards;
    }
    .buyerDiv{
    	width: 80vw;
    	background: #FFFFFF;
    	border-radius: 20rpx;
    	.buyerDivTitle{
    		text-align: center;
    		font-size: 32rpx;
    		height: 80rpx;
    		line-height: 80rpx;
    		border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
    	}
    	.buyerDivInput{
    		padding: 20rpx 30rpx;
    		margin: 0 20rpx 30rpx 20rpx;
    		border: 1px solid #333;
    	}
    	.buyerDivBtn{
    		font-size: 36rpx;
    		padding-bottom: 20rpx;
    		display: flex;
    		justify-content: space-between;
            .buyerDivText {
                width: 40vw;
                text-align: center;
            }
    	}
    }
    .payDiv {
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 140upx;
    	height: 60vh;
    
    	text {
    		font-size: 42rpx;
    	}
    
    	.close {
    		position: absolute;
    		width: 50upx;
    		height: 50upx;
    		right: 40upx;
    		top: 30upx;
    	}
    
    	.payTitle {
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    	}
    
    	.payPir {
    		display: flex;
    		justify-content: center;
    		flex-direction: column;
    		align-items: center;
    		// padding: 20upx 0upx 20upx;
    		font-size: 28upx;
    
    		text:last-child {
    			color: #FF5F60;
    			font-size: 50upx;
    			font-weight: bold;
    			margin-top: 10upx;
    		}
    	}
    
    	.payLine {
    		width: 100%;
    		box-sizing: border-box;
    		padding: 36upx;
    		display: flex;
    		justify-content: space-between;
    		font-size: 28upx !important;
    		color: #333333;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
            .nosel {
                width: 36upx;
                height: 36upx;
                border: 1upx solid rgba(60, 72, 104, 1);
                border-radius: 50%;
                margin-right: 20rpx;
            }
            
            .sel {
                background-image: url(../../static/img/check.png);
                background-repeat: no-repeat;
                width: 40upx;
                height: 40upx;
                background-size: 100%;
                margin-right: 20rpx;
            }
    		.txt {
    			color: #999999;
    		}
    
    	}
    
    	.payBtn {
    		width: 100%;
    		position: fixed;
    		left: 0;
    		bottom: 0;
    		height: 100upx;
    		background: #FFBF0A;
    		color: #fff;
    		font-size: 32upx;
    		line-height: 100upx;
    		text-align: center;
    		border-radius: 0;
    
    		&::after {
    			border: none;
    		}
    	}
    }
    .withdrawDiv {
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 140upx;
    	height: 70vh;
    
    	text {
    		font-size: 42rpx;
    	}
    
    	.close {
    		position: absolute;
    		width: 50upx;
    		height: 50upx;
    		right: 40upx;
    		top: 30upx;
    	}
    
    	.withdrawTitle {
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1rpx #c9c9ce dashed;
    	}
    
    	.withdrawPir {
    		display: flex;
    		justify-content: center;
    		flex-direction: column;
    		align-items: center;
    		// padding: 20upx 0upx 20upx;
    		font-size: 28upx;
    
    		text:last-child {
    			color: #FF5F60;
    			font-size: 50upx;
    			font-weight: bold;
    			margin-top: 10upx;
    		}
    	}
        .withdrawInput{
        	padding: 8rpx;
        	
        	border: 1px solid #e90;
        }
    	.withdrawLine {
    		width: 100%;
    		box-sizing: border-box;
    		padding: 20rpx 36rpx;
    		display: flex;
            align-items: center;
    		justify-content: space-between;
    		font-size: 28upx !important;
    		color: #333333;
    		border-bottom: 1rpx #c9c9ce dashed;
    	}
        .withdrawBon{
            border: 1px orange solid;
            border-radius: 20rpx;
            width: 15vw;
            text-align: center;
            padding: 10rpx 0;
            background: orange;
            color: #fff;
        }
        .withdrawText{
            height: 100rpx;
            border: 1px solid #e90;
            padding: 8rpx;
            width: 90vw;
            margin-top: 20rpx;
        }
    	.withdrawBtn {
    		width: 100%;
    		position: fixed;
    		left: 0;
    		bottom: 0;
    		height: 100upx;
    		background: #FFBF0A;
    		color: #fff;
    		font-size: 32upx;
    		line-height: 100upx;
    		text-align: center;
    		border-radius: 0;
    
    		&::after {
    			border: none;
    		}
    	}
    }
    .red {
        color: #ff6600;
    }
    .orange {
        color: orange;
    }
}
</style>

